<template>
  <osc-navpage
    class="personal-root"
    title="原料管理"
    height="100"
    titleColor="#000"
    backgroundColor="#eff3f2"
    leftItemSrc=""
    @naviBarLeftItemClick="naviBarLeftItemClick">

    <div class="content">
 
      <list>
        <refresh class="refresh" @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'">
          <text class="indicator">下拉刷新……</text>
        </refresh>

        <cell class="cell" v-for="item in lists">
          <div class="panel">
            <div class="panel-head">
              <text class="text">原料名称:{{item.name}}</text>
              <text class="text-bar">条形码：{{item.barCode}}</text>  
            </div>
            <div class="panel-bottom">
              <text class="text">单位:{{item.unitName}}</text>
            </div>
          </div>
        </cell>
      </list>
      
    </div>

    <div class="img-add" @click="addGoods">
      <image class="img-top" src="https://olwr1lamu.qnssl.com/%E6%B7%BB%E5%8A%A0.png"></image>
    </div>

  </osc-navpage> 
</template>

<script>
import route from 'router/page'
import mixins from 'mixins'

const storage = weex.requireModule('storage')
const modal = weex.requireModule('modal')
const stream = weex.requireModule('stream')

export default {
  data () {
    return {
      refreshing: false,
      lists: []
    }
  },
  mixins: [mixins],
  methods: {

    // naviBarLeftItemClick () {
    //   this.router.pop()
    // },

    onLoading () {
        // console.log('onLoading')
        // setTimeout(() => {
        //   this.$refs.list.$emit('loadingDone')
        // }, 200)
    },
    onrefresh (event) {
      modal.toast({ message: '刷新中', duration: 1 })
      this.refreshing = true
      setTimeout(() => {
        this.refreshing = false
      }, 200)
    },
    addGoods () {
      // modal.toast({ message: '刷新中222', duration: 1 })
      // 跳转到添加页面
      this.router.push({
         page: this.routerPage.addGoods
      })
    }
  }, 
  created () {
    stream.fetch({
      method: 'GET',
      type: 'json',
      url: this.imgUrl.collect.computerUrl + 'getGoodsList'
    }, callback => {
        // modal.toast({ message: '11111', duration: 1 })
        this.lists = callback.data
        // modal.toast({ message: callback.data, duration: 1 })
    })
  }
}
</script>
<style> 
  .indicator {
    margin-left: 300px;
  }
  .text-bar {
    margin-left: 10px;
    font-size: 32px;
  }
  .content {
    position: absolute;
    height: 100000px;
  }
  .img-add {
    position: absolute;
    width: 130px;
    height: 130px;
    margin-top: 900px;
    margin-left: 600px;
  }
  .img-top {
    opacity:0.7;
    width: 130px;
    height: 130px;
  }
  .indicator {
    color: #888888;
    font-size: 42px;
    text-align: center;
  }
  .panel {
    padding-top: 30px;
    width: 750px;
    height: 150px;
    flex-direction: row;
    border-width: 2px;
    border-style: solid;
    border-color: #DDDDDD;
    background-color: #F5F5F5;
  }
  .panel-head {
    flex-direction: row;  
  }
  .panel-bottom {
    margin-left: 30px;
    flex-direction: row;  
  }
  .text {
    margin-left: 10px;
    flex-direction: row;
    font-size: 42px;
    text-align: center;
    color: #41B883;
  }
  .refresh {
    margin-left: 300px;
  }
  .panel-head {
    flex-direction: column;
  }
</style>